<template>
  <div>
    <h2>form01</h2>
    formCfg: {{formCfg.message}}
    <div>
      <input v-model="formData.message" placeholder="edit me" v-required="formCfg.message" emc="message-error">
      <div class="message-error"></div>
    </div>
  </div>
</template>

<script>
import {validateUtils, httpUtils} from 'vue-npm';
export default {
  name: 'form01-demo',
  data(){
    const formCfg = {
      message: 'messageCfg'
    };
    const formData = {
      message:'message'
    };
    return {
      formData,
      formCfg
    };
  },
  mounted() {
    //console.log(httpUtils, validateUtils);
  },
  directives:{
    required: {
      inserted:  (el, binding) => {
        el.addEventListener('keyup', function (event) {
          const emc = el.getAttribute('emc');
          const emcs = document.getElementsByClassName(emc);
          if (el.value == '' || el.value == null) {
            el.className = el.className?el.className+' great-error-input':'great-error-input';
            if(emcs.length===1){
              const node = emcs[0];
              node.className = node.className?node.className+' great-error-msg':'great-error-msg';
              node.innerHTML='必填项不能为空！';
            }
          } else {
            el.className = el.className.replace('great-error-input','');
            if(emcs.length===1){
              emcs[0].innerHTML='';
            }
          }
          return event;
        });
      }
    }
  }
}
</script>

<style scoped>

</style>
